<template>
  <Tabs :value="show">
    <TabPane label="站点排名" name="company">
      <div class="charts-border indexChartsSize" style="margin-top:-5px;">
        <station-score-rank></station-score-rank>
      </div>
      <div class="charts-border indexChartsSize">
        <station-events-rank></station-events-rank>
      </div>
      <div class="charts-border indexChartsSize">
        <station-score-trend></station-score-trend>
      </div>
    </TabPane>
    <TabPane label="服务车辆及人次" name="station">
      <div class="charts-border indexChartsSize">
        <station-service-cars-top5></station-service-cars-top5>
      </div>
      <div class="charts-border indexChartsSize">
        <station-service-persons-top5></station-service-persons-top5>
      </div>
      <div class="charts-border indexChartsSize">
        <station-service-c-a-p-trend></station-service-c-a-p-trend>
      </div>
    </TabPane>
  </Tabs>
</template>

<script>
/*
中间图表统计设计页面
*/
import axios from 'axios'
import dayjs from 'dayjs'
import constData from '@/util/constData' // 保存的常量
import {getLastMonthDate,getLastWeekDate,formatXAxisData} from '@/util/util'

import StationScoreRank from './stationScoreRank'
import StationEventsRank from './stationEventsRank'
import StationScoreTrend from './stationScoreTrend'

import StationServiceCarsTop5 from './stationServiceCarsTop5'
import StationServicePersonsTop5 from './stationServicePersonsTop5'
import StationServiceCAPTrend from './stationServiceCAPTrend'

import { cancelAxiosList } from '@/api/ajax'
var node_schedule = require('node-schedule')

export default {
  components: {
    StationScoreRank,
    StationEventsRank,
    StationScoreTrend,
    StationServiceCarsTop5,
    StationServicePersonsTop5,
    StationServiceCAPTrend
  },
  props: {
    // 选择的站点名称
    selectedData: {
      type: Object,
      default: () => new Object({subCompany: 'xian', dateTime: 'week'})
    }
  },
  data () {
    return {
      show: 'company',
      groupType: 'hour', // 查询类型，按月，日，小时
      startTime: '', // 开始时间
      endTime: '', // 结束时间
    }
  },
  watch: {
    selectedData: {
      deep: true,
      handler (value) {
        if(this.selectedData.dateTime === 'today') {

        }else if(this.selectedData.dateTime === 'week'){

        }else if(this.selectedData.dateTime === 'month'){

        }
      }
    }
  },
  mounted () {
    var intervalRightStation = node_schedule.scheduleJob('*/30 * * * * *', ()=>{
      console.log('公司级每5秒执行一次!')
      this.show = this.show === 'company' ? 'station': 'company'
    })
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {
      console.log('取消首页公司级数据')
      intervalRightStation.cancel()
    })
  },
  methods: {
    //初始化
  }
}
</script>

<style lang="less">
.indexChartsSize {
  width: 100%;
  margin-bottom: 20px;
  height: 29vh;
  z-index: 2;
}
.indexChartsSize2 {
  width: 500px;
  height: 28vh;
  z-index: 2;
}
</style>


